<meta charset="UTF-8">

<div id="root">
<qf-table :columns="usersColumns" :data="usersData"></qf-table>
<br>
<hr>
<br>
<qf-table :columns="goodsColumns" :data="goodsData"></qf-table>
<br>
<hr>
<br>



</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="qfui.js"></script>

<script>
    const vm = new Vue({
        el:"#root",
        data: {
            
            usersColumns: [
                {title:"编号", key:'id'},
                {title:"姓名", key:'uname'},
                {title:"测试", key:'id'},
                {title:"性别", key:'sex'},
                {title:"性别另一种", key:'sex2', render: (row)=>`<b style="color:red">${row.sex2 === 1? '男':'女'}</b>`},
            ],
            usersData: [
                {id: 1,uname: "吕某",sex:'男',sex2:1},
                {id: 2,uname: "绿某",sex:'女',sex2:2},
                {id: 3,uname: "驴某",sex:'男',sex2:1},
            ],
            goodsColumns: [
            {title:"编号", key:'id'},
            {title:"商品名称", key:'title'},
            {title:"价格", key:'price'}
            ],
            goodsData: [
                {id:1,title:"商品1",price:1.11},
                {id:1,title:"商品2",price:2.22},
                {id:1,title:"商品3",price:3.33},
            ]
        }
    })
</script>
 
